<template>


  <div class="">
    <ul class="service_ul">

      <!--<NoData v-if="flag"></NoData>-->
      <NoData v-if="list.length==0"></NoData>

      <li class="service_li" v-for="item in list" @click="toDetail(item)">
        <div class="service_li_left">
          <div class="service_con left_item"><span class="left_item_title">需求内容：</span>
            {{item.u_name}}申请于{{item.create_at}}申请【{{item.catpid_name}}】项目中的【{{item.cat_name}}】服务
          </div>
          <div class="service_status left_item"><span class="left_item_title">服务状态：</span>
            <span v-if="item.status ==1">待解决</span>
            <span v-else-if="item.status ==2">正在解决</span>
            <span v-else-if="item.status ==3">已解决</span>
            <span v-else style="color: red">未解决</span>
          </div>
          <div class="service_volunteer left_item"><span
            class="left_item_title">志愿者：</span><span>{{item.provider_name}}</span>
          </div>
        </div>
        <div class="service_li_right">
          <img :src="item.thumb"/>
        </div>

      </li>

    </ul>
  </div>


</template>

<script>
  import NoData from '../../../components/nodata/NoData'
  export default {
    name: "service_status",
    data() {
      return {
        page: 1,
        limit: 10,
        list: [],
        flag:false,
      }
    },

    components:{
      NoData,
    },


    created() {
      this.$emit("childData",this.$route.query.childdata);
      this.getList();
    },

    methods: {
      getList() {
        let that = this;
        that.$http.get('/api/ScreenkApi/getVolunt', {
          vollege_id: this.$util.vollege_id,
          page: that.page,
          limit: that.limit
        }, r => {
          console.log('服务动态', r)
          that.list = r.data.data;
          if (r.data.length==0){
            that.flag=true;
          }



        })
      },

      toDetail(e) {
        let that = this;
        console.log('11222', e)
        that.$router.push({name: 'ServiceDetail', query: {id: e.id,name:'服务详情'}})

      },
    }
  }
</script>

<style scoped>

  .service_ul {
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
  }

  .service_li {
    height: 200px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #dedede;
    overflow: hidden;
  }

  .left_item {
    padding-bottom: 20px;
    font-size: 24px;
    color: #555555;
  }

  .left_item .left_item_title {
    color: #8b8c8b;
  }

  .service_status {
    color: #02c070;
  }

  .service_li_left {
    float: left;
  }

  .service_li_right {
    float: right;
    width: 200px;
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
  }

  .service_li_right img {
    width: 100%;
  }
</style>
